import React from 'react';
import AddLoanOption from './AddLoanOption';
import AddLoanSelect from './AddLoanSelect';
import DefaultLoanOption from './DefaultLoanOption';
import LoanData from './LoanStatusData';

var mainLoanStatus = [];

LoanData[0].map(function(prov){
	console.log('prov',prov[0]);
	mainLoanStatus.push({value:prov[0],name:prov[1]});
});

function getLoanChildStatusById(id){
		var arr = [];
		LoanData[id].map(function(subStatus){
			arr.push({value:subStatus[0],name:subStatus[1]})
		});
		return arr;
}

class CascadingLoanForm extends React.Component{

	constructor(props){
		super(props);
		this.state = {
			mainStatusSelectedValue:0,
			childStatusSelectedValue:0
		};
	}

	handleUserLoanSelect(mainStatusSelectedValue){
		console.log(mainStatusSelectedValue);
		this.setState({mainStatusSelectedValue: mainStatusSelectedValue});
	}

	handleChildStatusSelect(childStatusSelectedValue){
		this.setState({childStatusSelectedValue: childStatusSelectedValue});
	}

	render(){

		let childLoanStatus = (this.state.mainStatusSelectedValue !=0 ? getLoanChildStatusById(this.state.mainStatusSelectedValue) : [])

		return (<div>	
					<AddLoanSelect 
						mainStatus = {mainLoanStatus}
						onUserSelect = {this.handleUserLoanSelect.bind(this)}/>

					<AddLoanSelect 
						mainStatus = {childLoanStatus}
						onUserSelect = {this.handleChildStatusSelect.bind(this)}/>
				</div>);
	}		
}

export default CascadingLoanForm;